---
{
	"title": "Validation de formulaires",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Effectue la validation de formulaires Web selon un ensemble de règles de base avant qu'ils soient soumis.",
	"tag": "formvalid",
	"parentdir": "formvalid",
	"altLangPrefix": "formvalid",
	"dateModified": "2025-02-26"
}
---
<span class="wb-prettify all-pre hide"></span>

<ul>
	<li><a href="formvalid-fr.html">Validation de formulaires</a></li>
	<li><a href="formvalid-server-fr.html">Fusion des erreurs Serveur-Client</a></li>
</ul>

<hr>

<section>
	<h2>But</h2>
	<p>Effectue la validation de formulaires Web selon un ensemble de règles de base avant qu'ils soient soumis.</p>
</section>

<section>
	<h2>Exemples utilisant la validation régulière ou spécialisée</h2>

	<div class="wb-frmvld">
		<form action="#" method="get" id="validation-example">
			<fieldset>
				<legend>Coordonnées</legend>
				<div class="form-group">
					<label for="title1" class="required"><span class="field-name">Titre</span> <strong class="required">(obligatoire)</strong></label>
					<select class="form-control" id="title1" name="title1" autocomplete="honorific-prefix" required="required">
						<option label="Sélectionner un titre"></option>
						<option value="dr">D. Ph.</option>
						<option value="esq">Me</option>
						<option value="mr">M.</option>
						<option value="ms">Madame</option>
					</select>
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="title1" class="required"&gt;&lt;span class="field-name"&gt;Titre&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;select class="form-control" id="title1" name="title1" autocomplete="honorific-prefix" required="required"&gt;
				&lt;option label="Sélectionner un titre"&gt;&lt;/option&gt;
				&lt;option value="dr"&gt;D. Ph.&lt;/option&gt;
				&lt;option value="esq"&gt;Me&lt;/option&gt;
				&lt;option value="mr"&gt;M.&lt;/option&gt;
				&lt;option value="ms"&gt;Madame&lt;/option&gt;
			&lt;/select&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="fname1" class="required"><span class="field-name">Prénom</span> <strong class="required">(obligatoire)</strong></label>
					<input class="form-control" id="fname1" name="fname1" type="text" autocomplete="given-name" required="required" data-rule-minlength="2">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="fname1" class="required"&gt;&lt;span class="field-name"&gt;Prénom&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;input class="form-control" id="fname1" name="fname1" type="text" autocomplete="given-name" required="required" data-rule-minlength="2" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="lname1" class="required"><span class="field-name">Nom de famille</span> <strong class="required">(obligatoire)</strong></label>
					<input class="form-control" id="lname1" name="lname1" type="text" autocomplete="family-name" required="required" data-rule-minlength="2">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="lname1" class="required"&gt;&lt;span class="field-name"&gt;Nom de famille&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;input class="form-control" id="lname1" name="lname1" type="text" autocomplete="family-name" required="required" data-rule-minlength="2" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="tel1" class="required"><span class="field-name">Numéro de téléphone (avec l'indicatif régional)</span> <strong class="required">(obligatoire)</strong></label>
					<input class="form-control" id="tel1" name="tel1" type="tel" autocomplete="tel" required="required" data-rule-phoneUS="true">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="tel1" class="required"&gt;&lt;span class="field-name"&gt;Numéro de téléphone (avec l'indicatif régional)&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;input class="form-control" id="tel1" name="tel1" type="tel" autocomplete="tel" required="required" data-rule-phoneUS="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="pcodeca1" class="required"><span class="field-name">Code postal (Canada)</span> <strong class="required">(obligatoire)</strong></label>
					<input class="form-control" id="pcodeca1" name="pcodeca1" type="text" autocomplete="postal-code" size="7" maxlength="7" required="required" data-rule-postalCodeCA="true">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="pcodeca1" class="required"&gt;&lt;span class="field-name"&gt;Code postal&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;input class="form-control" id="pcodeca1" name="pcodeca1" type="text" autocomplete="postal-code" required="required" data-rule-postalCodeCA="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="email1"><span class="field-name">Adresse électronique</span> (votrenom@domaine.com)</label>
					<input class="form-control" id="email1" name="email1" type="email" autocomplete="email">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="email1"&gt;&lt;span class="field-name"&gt;Adresse électronique&lt;/span&gt; (votrenom@domaine.com)&lt;/label&gt;
			&lt;input class="form-control" id="email1" name="email1" type="email" autocomplete="email" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="url1"><span class="field-name">URL du site Web (https://www.url.com)</span></label>
					<input class="form-control" id="url1" name="url1" type="url" autocomplete="url">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="url1"&gt;&lt;span class="field-name"&gt;URL du site Web (https://www.url.com)&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="url1" name="url1" type="url" autocomplete="url" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="file1" class="required"><span class="field-name">Fichier</span> <strong class="required">(obligatoire)</strong></label>
					<input id="file1" name="file1" type="file" required="required">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="file1" class="required"&gt;&lt;span class="field-name"&gt;Fichier&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;input id="file1" name="file1" type="file" required="required" /&gt;
		&lt;/div&gt;</code></pre>
				</details>
			</fieldset>

			<fieldset>
				<legend>Autres exemples</legend>
				<div class="form-group">
					<label for="date1"><span class="field-name">Date</span><span class="datepicker-format"> (<abbr title="Les quatre chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span></label>
					<input class="form-control" id="date1" name="date1" type="date" data-rule-dateISO="true">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="date1"&gt;&lt;span class="field-name"&gt;Date&lt;/span&gt;&lt;span class="datepicker-format"&gt; (&lt;abbr title="Les quatre chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour"&gt;AAAA-MM-JJ&lt;/abbr&gt;)&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="date1" name="date1" type="date" data-rule-dateISO="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="time1"><span class="field-name">Heure</span> (hh:mm)</label>
					<input class="form-control" id="time1" name="time1" type="time">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="time1"&gt;&lt;span class="field-name"&gt;Heure&lt;/span&gt; (hh:mm)&lt;/label&gt;
			&lt;input class="form-control" id="time1" name="time1" type="time" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="number1"><span class="field-name">Nombre</span> (entre -1 et 1, par pas de 0,1)</label>
					<input class="form-control" id="number1" name="number1" type="number" min="-1" max="1" step="0.1">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
	...
	&lt;div class="form-group"&gt;
		&lt;label for="number1"&gt;&lt;span class="field-name"&gt;Nombre&lt;/span&gt; (entre -1 et 1, par pas de 0,1)&lt;/label&gt;
		&lt;input class="form-control" id="number1" name="number1" type="number" min="-1" max="1" step="0.1"/&gt;
	&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="an1"><span class="field-name">Alphanumérique</span> (4 caractères minimum)</label>
					<input class="form-control" id="an1" name="an1" type="text" data-rule-alphanumeric="true" data-rule-minlength="4">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="an1"&gt;&lt;span class="field-name"&gt;Alphanumérique&lt;/span&gt; (4 caractères minimum)&lt;/label&gt;
			&lt;input class="form-control" id="an1" name="an1" type="text" data-rule-alphanumeric="true" data-rule-minlength="4" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="numeric1"><span class="field-name">Numérique</span> (chiffres seulement)</label>
					<input class="form-control" id="numeric1" name="numeric1" type="number" data-rule-digits="true">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="numeric1"&gt;&lt;span class="field-name"&gt;Numérique&lt;/span&gt; (chiffres seulement)&lt;/label&gt;
			&lt;input class="form-control" id="numeric1" name="numeric1" type="number" data-rule-digits="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="letters1"><span class="field-name">Lettres seulement</span> (5 caractères maximum)</label>
					<input class="form-control" id="letters1" name="letters1" type="text" size="5" maxlength="5" data-rule-lettersonly="true">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="letters1"&gt;&lt;span class="field-name"&gt;Lettres seulement&lt;/span&gt; (5 caractères maximum)&lt;/label&gt;
			&lt;input class="form-control" id="letters1" name="letters1" type="text" size="5" maxlength="5" data-rule-lettersonly="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="text1"><span class="field-name">Lettres et des signes de ponctuation seulement</span> (ponctuation qui est permise&#160;: [. , ( ) "])</label>
					<input class="form-control" id="text1" name="text1" type="text" data-rule-letterswithbasicpunc="true">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="text1"&gt;&lt;span class="field-name"&gt;Lettres et des signes de ponctuation seulement&lt;/span&gt; (ponctuation qui est permise&#160;: [. , ( ) "])&lt;/label&gt;
			&lt;input class="form-control" id="text1" name="text1" type="text" data-rule-letterswithbasicpunc="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="word1"><span class="field-name">Maximum de 10 mots</span></label>
					<input class="form-control" id="word1" name="word1" type="text" data-rule-maxWords="10">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="word1"&gt;&lt;span class="field-name"&gt;Maximum de 10 mots&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="word1" name="word1" type="text" data-rule-maxWords="10" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="word2"><span class="field-name">Minimum de 2 mots</span></label>
					<input class="form-control" id="word2" name="word2" type="text" data-rule-minWords="2">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="word2"&gt;&lt;span class="field-name"&gt;Minimum de 2 mots&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="word2" name="word2" type="text" data-rule-minWords="2" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="word3"><span class="field-name">Entre 2 et 10 mots</span></label>
					<input class="form-control" id="word3" name="word3" type="text" data-rule-rangeWords="[2,10]">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="word3"&gt;&lt;span class="field-name"&gt;Entre 2 et 10 mots&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="word3" name="word3" type="text" data-rule-rangeWords="[2,10]" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="nowhitespace1"><span class="field-name">Sans d'espaces blancs</span></label>
					<input class="form-control" id="nowhitespace1" name="nowhitespace1" type="text" data-rule-nowhitespace="true">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="nowhitespace1"&gt;&lt;span class="field-name"&gt;Sans d'espaces blancs&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="nowhitespace1" name="nowhitespace1" type="text" data-rule-nowhitespace="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="password1"><span class="field-name">Mot de passe</span> (entre 5 et 10 caractères)</label>
					<input class="form-control" id="password1" name="password1" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-rangelength="[5,10]">
					<label for="passwordconfirm"><span class="field-name">Confirmez votre mot de passe</span></label>
					<input class="form-control" id="passwordconfirm" name="passwordconfirm" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-equalTo="#password1">
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="password1"&gt;&lt;span class="field-name"&gt;Mot de passe&lt;/span&gt; (entre 5 et 10 caractères)&lt;/label&gt;
			&lt;input class="form-control" id="password1" name="password1" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-rangelength="[5,10]" /&gt;
			&lt;label for="passwordconfirm"&gt;&lt;span class="field-name"&gt;Confirmez votre mot de passe&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="passwordconfirm" name="passwordconfirm" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-equalTo="#password1" /&gt;
		&lt;/div&gt;</code></pre>
				</details>
			</fieldset>

			<div class="form-group">
				<div class="checkbox checkbox-standalone required">
					<label for="agree1"><input id="agree1" name="agree1" type="checkbox" required> <span class="field-name">Je suis d’accord</span> <strong class="required">(obligatoire)</strong></label>
				</div>
			</div>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				{{>alertariahidden}}
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
			&lt;div class="form-group"&gt;
				&lt;div class="checkbox checkbox-standalone required"&gt;
					&lt;label for="agree1"&gt;&lt;input id="agree1" name="agree1" type="checkbox" required&gt; &lt;span class="field-name"&gt;Je suis d’accord&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
				&lt;/div&gt;
			&lt;/div&gt;</code></pre>
			</details>

			<fieldset class="chkbxrdio-grp">
				<legend class="required"><span class="field-name">Animaux favoris</span> <strong class="required">(obligatoire)</strong></legend>
				<div class="checkbox">
					<label for="animal1"><input type="checkbox" name="animal" value="1" id="animal1" data-rule-required="true"> Chien</label>
				</div>
				<div class="checkbox">
					<label for="animal2"><input type="checkbox" name="animal" value="2" id="animal2"> Chat</label>
				</div>
				<div class="checkbox">
					<label for="animal3"><input type="checkbox" name="animal" value="3" id="animal3"> Poisson</label>
				</div>
				<div class="checkbox">
					<label for="animal4"><input type="checkbox" name="animal" value="4" id="animal4"> Autre</label>
				</div>
			</fieldset>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<div class="alert alert-info"><p>Il est recommandé d'utiliser <code>data-rule-required="true"</code> au lieu de <code>required="required"</code> puisque cela permet d'éviter que les lecteurs d'écran indiquent que la première option est obligatoire.</p></div>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Animaux favoris&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="animal1"&gt;&lt;input type="checkbox" name="animal" value="1" id="animal1" data-rule-required="true" /&gt; Chien&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="animal2"&gt;&lt;input type="checkbox" name="animal" value="2" id="animal2" /&gt; Chat&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="animal3"&gt;&lt;input type="checkbox" name="animal" value="3" id="animal3" /&gt; Poisson&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="animal4"&gt;&lt;input type="checkbox" name="animal" value="4" id="animal4" /&gt; Autre&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<fieldset class="chkbxrdio-grp">
				<legend class="required"><span class="field-name">Statut de citoyen</span> <strong class="required">(obligatoire)</strong></legend>
				<div class="radio">
					<label for="status1"><input type="radio" name="status" value="1" id="status1" data-rule-required="true"> Citoyen canadien</label>
				</div>
				<div class="radio">
					<label for="status2"><input type="radio" name="status" value="2" id="status2"> Résident permanent</label>
				</div>
				<div class="radio">
					<label for="status3"><input type="radio" name="status" value="3" id="status3"> Permis de travail</label>
				</div>
				<div class="radio">
					<label for="status4"><input type="radio" name="status" value="4" id="status4"> Autre</label>
				</div>
			</fieldset>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<div class="alert alert-info"><p>Il est recommandé d'utiliser <code>data-rule-required="true"</code> au lieu de <code>required="required"</code> puisque cela permet d'éviter que les lecteurs d'écran indiquent que la première option est obligatoire.</p></div>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Statut de citoyen&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="radio"&gt;
				&lt;label for="status1"&gt;&lt;input type="radio" name="status" value="1" id="status1" data-rule-required="true" /&gt; Citoyen canadien&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="status2"&gt;&lt;input type="radio" name="status" value="2" id="status2" /&gt; Résident permanent&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="status3"&gt;&lt;input type="radio" name="status" value="3" id="status3" /&gt; Permis de travail&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="status4"&gt;&lt;input type="radio" name="status" value="4" id="status4" /&gt; Autre&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<input type="submit" value="Soumettre" class="btn btn-primary"> <input type="reset" value="Réinitialiser la page aux valeurs par défaut" class="btn btn-link btn-sm show p-0 mrgn-tp-md">
		</form>
	</div>
</section>
<hr>
<section>
	<h2>Exemples utilisant des champs obligatoires sans astérisques</h2>
	<p>Les champs obligatoires peuvent être alternativement stylés sans astérisques en ajoutant la classe <code>required-no-asterisk</code> à l’un de leurs éléments parents (comme <code>&lt;div class="wb-frmvld"&gt;</code> ou <code>&lt;form&gt;</code>).</p>
	<p>Que les astérisques soient utilisés ou non, il est recommandé qu’ils soient implémentés de façon uniforme dans un même formulaire. Veuillez ne pas mélanger les styles d’astérisques différents dans un même formulaire.</p>
	<div class="wb-frmvld required-no-asterisk">
		<form action="#" method="get" id="validation-example-4">
			<div class="form-group">
				<label for="nname1" class="required"><span class="field-name">Pseudonyme</span> <strong class="required">(obligatoire)</strong></label>
				<input class="form-control" id="nname1" name="nname1" type="text" autocomplete="nickname" required="required">
			</div>
			<details class="mrgn-bttm-md">
				<summary>View code</summary>
				{{>alertariahidden}}
				<pre><code>&lt;div class="wb-frmvld required-no-asterisk"&gt;
&lt;form action="#" method="get" id="validation-example-4"&gt;
	...
	&lt;div class="form-group"&gt;
		&lt;label for="nname1" class="required"&gt;&lt;span class="field-name"&gt;Pseudonyme&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
		&lt;input class="form-control" id="nname1" name="nname1" type="text" autocomplete="nickname" required="required" /&gt;
	&lt;/div&gt;</code></pre>
			</details>

			<div class="form-group">
				<label for="cname1" class="required"><span class="field-name">Nom du pays</span> <strong class="required">(obligatoire)</strong></label>
				<input class="form-control" id="cname1" name="cname1" type="text" autocomplete="country-name" required="required">
			</div>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				{{>alertariahidden}}
				<pre><code>&lt;div class="wb-frmvld required-no-asterisk"&gt;
&lt;form action="#" method="get" id="validation-example-4"&gt;
	...
	&lt;div class="form-group"&gt;
		&lt;label for="cname1" class="required"&gt;&lt;span class="field-name"&gt;Nom du pays&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
		&lt;input class="form-control" id="cname1" name="cname1" type="text" autocomplete="country-name" required="required" /&gt;
	&lt;/div&gt;</code></pre>
			</details>

			<fieldset class="chkbxrdio-grp">
				<legend class="required"><span class="field-name">Navigateur Web favori</span> <strong class="required">(obligatoire)</strong></legend>
				<div class="radio">
					<label for="fbrowser1"><input type="radio" name="fbrowser" value="1" id="fbrowser1" data-rule-required="true"> Chrome</label>
				</div>
				<div class="radio">
					<label for="fbrowser2"><input type="radio" name="fbrowser" value="2" id="fbrowser2"> Edge</label>
				</div>
				<div class="radio">
					<label for="fbrowser3"><input type="radio" name="fbrowser" value="3" id="fbrowser3"> Firefox</label>
				</div>
				<div class="radio">
					<label for="fbrowser4"><input type="radio" name="fbrowser" value="4" id="fbrowser4"> Safari</label>
				</div>
				<div class="radio">
					<label for="fbrowser5"><input type="radio" name="fbrowser" value="5" id="fbrowser5"> Autre</label>
				</div>
			</fieldset>
			<details class="mrgn-bttm-md">
				<summary>View code</summary>
				{{>alertariahidden}}
				<pre><code>&lt;div class="wb-frmvld required-no-asterisk"&gt;
	&lt;form action="#" method="get" id="validation-example-4"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Favourite web browser&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="radio"&gt;
				&lt;label for="fbrowser1"&gt;&lt;input type="radio" name="fbrowser" value="1" id="fbrowser1" data-rule-required="true" /&gt; Chrome&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="fbrowser2"&gt;&lt;input type="radio" name="fbrowser" value="2" id="fbrowser2" /&gt; Edge&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="fbrowser3"&gt;&lt;input type="radio" name="fbrowser" value="3" id="fbrowser3" /&gt; Firefox&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="fbrowser4"&gt;&lt;input type="radio" name="fbrowser" value="4" id="fbrowser4" /&gt; Safari&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="fbrowser5"&gt;&lt;input type="radio" name="fbrowser" value="5" id="fbrowser5" /&gt; Other&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<input type="submit" value="Submit" class="btn btn-primary"> <input type="reset" value="Reset page to defaults" class="btn btn-link btn-sm show p-0 mrgn-tp-md">
		</form>
	</div>
</section>
<hr>
<section>
	<h2>Exemple utilisant un modèle de validation personnalisé</h2>
	<p>Si l'attribut <code>pattern</code> est utilisé de paire avec l'attribut <code>data-msg</code>, la validation du motif prévaudra; ce qui signifie qu'au final vous n'obtiendrez seulement que le message d'erreur générique qui provient du <code>pattern</code>. Il est fortement recommandé d'utiliser l'attribut <code>data-msg</code> pour personnaliser le message d'erreur affiché par la validation du motif lorsque le champ est en état d'erreur.</p>
	<div class="wb-frmvld">
		<form action="#" method="get" id="validation-example-3">
			<div class="form-group">
				<label for="custom1" class="required"><span class="field-name">Numéro d'application (une lettre suivi de six chiffres)</span> <strong class="required">(obligatoire)</strong></label>
				<input class="form-control" id="custom1" name="custom1" type="text" pattern="[A-Za-z][0-9]{6}" data-msg="Veuillez entrer un numéro d'application valide" required="required">
			</div>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				{{>alertariahidden}}
				<pre><code>&lt;div class="wb-frmvld"&gt;
				&lt;form action="#" method="get" id="validation-example"&gt;
					...
					&lt;div class="form-group"&gt;
						&lt;label for="custom1" class="required"&gt;&lt;span class="field-name"&gt;Numéro d'application (une lettre suivi de six chiffres)&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
						&lt;input class="form-control" id="custom1" name="custom1" type="text" pattern="[A-Za-z][0-9]{6}" required="required" /&gt;
					&lt;/div&gt;</code></pre>
			</details>

			<input type="submit" value="Soumettre" class="btn btn-primary"> <input type="reset" value="Réinitialiser la page aux valeurs par défaut" class="btn btn-link btn-sm show p-0 mrgn-tp-md">
		</form>
	</div>
</section>
<hr>
<section>
<!-- checkbox in list item -->
	<h2>Exemples variés de formulaires verticaux et horizontaux</h2>
	<div class="wb-frmvld">
		<form action="#" method="get" id="validation-example-2">

			<!-- checkbox in list item with implicit labels-->
			<fieldset class="chkbxrdio-grp">
				<legend class="required"><span class="field-name">Cases à cocher empilées dans un modèle d'éléments <code>&lt;li&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
				<ul class="form-group list-unstyled">
					<li class="checkbox">
						<label for="example1a"><input type="checkbox" name="example1" value="1" id="example1a" required="required">Pomme</label>
					</li>
					<li class="checkbox">
						<label for="example1b"><input type="checkbox" name="example1" value="2" id="example1b">Orange</label>
					</li>
					<li class="checkbox">
						<label for="example1c"><input type="checkbox" name="example1" value="3" id="example1c">Kiwi</label>
					</li>
					<li class="checkbox">
						<label for="example1d"><input type="checkbox" name="example1" value="4" id="example1d">Autre</label>
					</li>
				</ul>
			</fieldset>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Cases à cocher empilées dans un modèle d'éléments &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;ul class="form-group list-unstyled"&gt;
				&lt;li class="checkbox"&gt;
					&lt;label for="example1a"&gt;&lt;input type="checkbox" name="example1" value="1" id="example1a" required="required" /&gt;Pomme&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="checkbox"&gt;
					&lt;label for="example1b"&gt;&lt;input type="checkbox" name="example1" value="2" id="example1b" /&gt;Orange&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="checkbox"&gt;
					&lt;label for="example1c"&gt;&lt;input type="checkbox" name="example1" value="3" id="example1c" /&gt;Kiwi&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="checkbox"&gt;
					&lt;label for="example1d"&gt;&lt;input type="checkbox" name="example1" value="4" id="example1d" /&gt;Autre&lt;/label&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/fieldset&gt;</code></pre>
				<div class="well well-sm"><strong>Remarque&nbsp;:</strong> L'attribut <code>for</code> dans les étiquettes est facultatif pour ce modèle</div>
			</details>

			<!-- radio buttons in a list with implicit labels -->
			<fieldset class="chkbxrdio-grp">
				<legend class="required"><span class="field-name">Boutons radio verticaux dans un modèle d'éléments <code>&lt;li&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
				<ul class="form-group list-unstyled">
					<li class="radio">
						<label for="example2a"><input type="radio" name="example2" value="1" id="example2a" required="required">Pomme</label>
					</li>
					<li class="radio">
						<label for="example2b"><input type="radio" name="example2" value="2" id="example2b">Orange</label>
					</li>
					<li class="radio">
						<label for="example2c"><input type="radio" name="example2" value="3" id="example2c">Kiwi</label>
					</li>
					<li class="radio">
						<label for="example2d"><input type="radio" name="example2" value="4" id="example2d">Autre</label>
					</li>
				</ul>
			</fieldset>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Boutons radio verticaux dans un modèle d'éléments &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;ul class="form-group list-unstyled"&gt;
				&lt;li class="radio"&gt;
					&lt;label for="example2a"&gt;&lt;input type="radio" name="example2" value="1" id="example2a" required="required" /&gt;Pomme&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="radio"&gt;
					&lt;label for="example2b"&gt;&lt;input type="radio" name="example2" value="2" id="example2b" /&gt;Orange&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="radio"&gt;
					&lt;label for="example2c"&gt;&lt;input type="radio" name="example2" value="3" id="example2c" /&gt;Kiwi&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="radio"&gt;
					&lt;label for="example2d"&gt;&lt;input type="radio" name="example2" value="4" id="example2d" /&gt;Autre&lt;/label&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/fieldset&gt;</code></pre>
				<div class="well well-sm"><strong>Remarque&nbsp;:</strong> L'attribut <code>for</code> dans les étiquettes est facultatif pour ce modèle</div>
			</details>

			<!-- checkbox in div pattern with implicit labels-->
			<fieldset class="chkbxrdio-grp">
				<legend class="required"><span class="field-name">Cases à cocher empilées dans un modèle d’éléments <code>&lt;div&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
				<div class="checkbox">
					<label for="example3a"><input type="checkbox" name="example3" value="1" id="example3a" required="required">Pomme</label>
				</div>
				<div class="checkbox">
					<label for="example3b"><input type="checkbox" name="example3" value="2" id="example3b">Orange</label>
				</div>
				<div class="checkbox">
					<label for="example3c"><input type="checkbox" name="example3" value="3" id="example3c">Kiwi</label>
				</div>
				<div class="checkbox">
					<label for="example3d"><input type="checkbox" name="example3" value="4" id="example3d">Autre</label>
				</div>
			</fieldset>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Cases à cocher empilées dans un modèle d’éléments &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="example3a"&gt;&lt;input type="checkbox" name="example3" value="1" id="example3a" required="required" /&gt;Pomme&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="example3b"&gt;&lt;input type="checkbox" name="example3" value="2" id="example3b" /&gt;Orange&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="example3c"&gt;&lt;input type="checkbox" name="example3" value="3" id="example3c" /&gt;Kiwi&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="example3d"&gt;&lt;input type="checkbox" name="example3" value="4" id="example3d" /&gt;Autre&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
				<div class="well well-sm"><strong>Remarque&nbsp;:</strong> L'attribut <code>for</code> dans les étiquettes est facultatif pour ce modèle</div>
			</details>

			<!-- radio buttons in div pattern with implicit labels-->
			<fieldset class="chkbxrdio-grp">
				<legend class="required"><span class="field-name">Boutons radios empilés dans un modèle d’éléments <code>&lt;div&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
				<div class="radio">
					<label for="example4a"><input type="radio" name="example4" value="1" id="example4a" required="required">Pomme</label>
				</div>
				<div class="radio">
					<label for="example4b"><input type="radio" name="example4" value="2" id="example4b">Orange</label>
				</div>
				<div class="radio">
					<label for="example4c"><input type="radio" name="example4" value="3" id="example4c">Kiwi</label>
				</div>
				<div class="radio">
					<label for="example4d"><input type="radio" name="example4" value="4" id="example4d">Autre</label>
				</div>
			</fieldset>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Boutons radios empilés dans un modèle d’éléments &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="radio"&gt;
				&lt;label for="example4a"&gt;&lt;input type="radio" name="example4" value="1" id="example4a" required="required" /&gt;Pomme&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="example4b"&gt;&lt;input type="radio" name="example4" value="2" id="example4b" /&gt;Orange&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="example4c"&gt;&lt;input type="radio" name="example4" value="3" id="example4c" /&gt;Kiwi&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="example4d"&gt;&lt;input type="radio" name="example4" value="4" id="example4d" /&gt;Autre&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
				<div class="well well-sm"><strong>Remarque&nbsp;:</strong> L'attribut <code>for</code> dans les étiquettes est facultatif pour ce modèle</div>
			</details>

			<!-- checkbox in list item with explicit labels-->
			<fieldset class="chkbxrdio-grp">
				<legend class="required"><span class="field-name">Cases à cocher horizontales dans un modèle d'éléments <code>&lt;li&gt;</code> comportant des étiquettes explicites</span> <strong class="required">(obligatoire)</strong></legend>
				<ul class="form-inline list-unstyled">
					<li class="label-inline">
						<input type="checkbox" name="example5" value="1" id="example5a" required="required">
						<label for="example5a">Pomme</label>
					</li>
					<li class="label-inline">
						<input type="checkbox" name="example5" value="2" id="example5b">
						<label for="example5b">Orange</label>
					</li>
					<li class="label-inline">
						<input type="checkbox" name="example5" value="3" id="example5c">
						<label for="example5c">Kiwi</label>
					</li>
					<li class="label-inline">
						<input type="checkbox" name="example5" value="4" id="example5d">
						<label for="example5d">Autre</label>
					</li>
				</ul>
			</fieldset>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Cases à cocher horizontales dans un modèle d'éléments &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; comportant des étiquettes explicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;ul class="form-inline list-unstyled"&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="checkbox" name="example5" value="1" id="example5a" required="required" /&gt;
					&lt;label for="example5a"&gt;Pomme&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="checkbox" name="example5" value="2" id="example5b" /&gt;
					&lt;label for="example5b"&gt;Orange&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="checkbox" name="example5" value="3" id="example5c" /&gt;
					&lt;label for="example5c"&gt;Kiwi&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="checkbox" name="example5" value="4" id="example5d" /&gt;
					&lt;label for="example5d"&gt;Autre&lt;/label&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<!-- radio buttons in list item with explicit labels-->
			<fieldset class="chkbxrdio-grp">
				<legend class="required"><span class="field-name">Boutons radios horizontaux dans un modèle d'éléments <code>&lt;li&gt;</code> comportant des étiquettes explicites</span> <strong class="required">(obligatoire)</strong></legend>
				<ul class="form-inline list-unstyled">
					<li class="label-inline">
						<input type="radio" name="example6" value="1" id="example6a" required="required">
						<label for="example6a">Pomme</label>
					</li>
					<li class="label-inline">
						<input type="radio" name="example6" value="2" id="example6b">
						<label for="example6b">Orange</label>
					</li>
					<li class="label-inline">
						<input type="radio" name="example6" value="3" id="example6c">
						<label for="example6c">Kiwi</label>
					</li>
					<li class="label-inline">
						<input type="radio" name="example6" value="4" id="example6d">
						<label for="example6d">Autre</label>
					</li>
				</ul>
			</fieldset>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Boutons radios horizontaux dans un modèle d'éléments &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; comportant des étiquettes explicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;ul class="form-inline list-unstyled"&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="radio" name="example6" value="1" id="example6a" required="required" /&gt;
					&lt;label for="example6a"&gt;Pomme&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="radio" name="example6" value="2" id="example6b" /&gt;
					&lt;label for="example6b"&gt;Orange&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="radio" name="example6" value="3" id="example6c" /&gt;
					&lt;label for="example6c"&gt;Kiwi&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="radio" name="example6" value="4" id="example6d" /&gt;
					&lt;label for="example6d"&gt;Autre&lt;/label&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<!-- checkboxes inline with implicit labels-->
			<fieldset class="form-inline chkbxrdio-grp">
				<legend class="required"><span class="field-name">Cases à cocher horizontales dans un modèle d'éléments <code>&lt;label&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
				<label for="example7a" class="checkbox-inline"><input type="checkbox" name="example7" value="1" id="example7a" required="required">Téléphone intelligent</label>
				<label for="example7b" class="checkbox-inline"><input type="checkbox" name="example7" value="2" id="example7b">Ordinateur portatif</label>
				<label for="example7c" class="checkbox-inline"><input type="checkbox" name="example7" value="3" id="example7c">Système d’assistance vocale</label>
				<label for="example7d" class="checkbox-inline"><input type="checkbox" name="example7" value="4" id="example7d">Réacteur à fusion</label>
			</fieldset>
			<details class="mrgn-bttm-md mrgn-tp-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="form-inline chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Cases à cocher horizontales dans un modèle d'éléments &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;label for="example7a" class="checkbox-inline"&gt;&lt;input type="checkbox" name="example7" value="1" id="example7a" required="required" /&gt;Téléphone intelligent&lt;/label&gt;
			&lt;label for="example7b" class="checkbox-inline"&gt;&lt;input type="checkbox" name="example7" value="2" id="example7b" /&gt;Ordinateur portatif&lt;/label&gt;
			&lt;label for="example7c" class="checkbox-inline"&gt;&lt;input type="checkbox" name="example7" value="3" id="example7c" /&gt;Système d’assistance vocale&lt;/label&gt;
			&lt;label for="example7d" class="checkbox-inline"&gt;&lt;input type="checkbox" name="example7" value="4" id="example7d" /&gt;Réacteur à fusion&lt;/label&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<!-- radio buttons inline with implicit labels-->
			<fieldset class="form-inline chkbxrdio-grp">
				<legend class="required"><span class="field-name">Boutons radio horizontaux dans un modèle d'éléments <code>&lt;label&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
				<label for="example8a" class="radio-inline"><input type="radio" name="example8" value="1" id="example8a" required="required">Téléphone intelligent</label>
				<label for="example8b" class="radio-inline"><input type="radio" name="example8" value="2" id="example8b">Ordinateur portatif</label>
				<label for="example8c" class="radio-inline"><input type="radio" name="example8" value="3" id="example8c">Système d’assistance vocale</label>
				<label for="example8d" class="radio-inline"><input type="radio" name="example8" value="4" id="example8d">Réacteur à fusion</label>
			</fieldset>
			<details class="mrgn-bttm-md mrgn-tp-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="form-inline chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Boutons radio horizontaux dans un modèle d'éléments &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;label for="example8a" class="radio-inline"&gt;&lt;input type="radio" name="example8" value="1" id="example8a" required="required" /&gt;Téléphone intelligent&lt;/label&gt;
			&lt;label for="example8b" class="radio-inline"&gt;&lt;input type="radio" name="example8" value="2" id="example8b" /&gt;Ordinateur portatif&lt;/label&gt;
			&lt;label for="example8c" class="radio-inline"&gt;&lt;input type="radio" name="example8" value="3" id="example8c" /&gt;Système d’assistance vocale&lt;/label&gt;
			&lt;label for="example8d" class="radio-inline"&gt;&lt;input type="radio" name="example8" value="4" id="example8d" /&gt;Réacteur à fusion&lt;/label&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<!-- checkbox inline list item with explicit labels-->
			<fieldset class="form-inline chkbxrdio-grp">
				<legend class="required"><span class="field-name">Cases à cocher horizontales dans un modèle d’éléments <code>&lt;div&gt;</code> comportant des étiquettes explicites</span> <strong class="required">(obligatoire)</strong></legend>
				<div class="label-inline">
					<input type="checkbox" name="example9" value="1" id="example9a" required="required">
					<label for="example9a">Téléphone intelligent</label>
				</div>
				<div class="label-inline">
					<input type="checkbox" name="example9" value="2" id="example9b">
					<label for="example9b">Ordinateur portatif</label>
				</div>
				<div class="label-inline">
					<input type="checkbox" name="example9" value="3" id="example9c">
					<label for="example9c">Système d’assistance vocale</label>
				</div>
				<div class="label-inline">
					<input type="checkbox" name="example9" value="4" id="example9d">
					<label for="example9d">Réacteur à fusion</label>
				</div>
			</fieldset>
			<details class="mrgn-bttm-md mrgn-tp-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="form-inline chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Cases à cocher horizontales dans un modèle d’éléments &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; comportant des étiquettes explicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="checkbox" name="example9" value="1" id="example9a" required="required" /&gt;
				&lt;label for="example9a"&gt;Téléphone intelligent&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="checkbox" name="example9" value="2" id="example9b" /&gt;
				&lt;label for="example9b"&gt;Ordinateur portatif&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="checkbox" name="example9" value="3" id="example9c" /&gt;
				&lt;label for="example9c"&gt;Système d’assistance vocale&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="checkbox" name="example9" value="4" id="example9d" /&gt;
				&lt;label for="example9d"&gt;Réacteur à fusion&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<!-- radio buttons inline list item with explicit labels-->
			<fieldset class="form-inline chkbxrdio-grp">
				<legend class="required"><span class="field-name">Boutons radios horizontaux dans un modèle d’éléments <code>&lt;div&gt;</code> comportant des étiquettes explicites</span> <strong class="required">(obligatoire)</strong></legend>
				<div class="label-inline">
					<input type="radio" name="example10" value="1" id="example10a" required="required">
					<label for="example10a">Téléphone intelligent</label>
				</div>
				<div class="label-inline">
					<input type="radio" name="example10" value="2" id="example10b">
					<label for="example10b">Ordinateur portatif</label>
				</div>
				<div class="label-inline">
					<input type="radio" name="example10" value="3" id="example10c">
					<label for="example10c">Système d’assistance vocale</label>
				</div>
				<div class="label-inline">
					<input type="radio" name="example10" value="4" id="example10d">
					<label for="example10d">Réacteur à fusion</label>
				</div>
			</fieldset>
			<details class="mrgn-bttm-md mrgn-tp-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="form-inline chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Boutons radios horizontaux dans un modèle d’éléments &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; comportant des étiquettes explicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="radio" name="example10" value="1" id="example10a" required="required" /&gt;
				&lt;label for="example10a"&gt;Téléphone intelligent&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="radio" name="example10" value="2" id="example10b" /&gt;
				&lt;label for="example10b"&gt;Ordinateur portatif&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="radio" name="example10" value="3" id="example10c" /&gt;
				&lt;label for="example10c"&gt;Système d’assistance vocale&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="radio" name="example10" value="4" id="example10d" /&gt;
				&lt;label for="example10d"&gt;Réacteur à fusion&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<input type="submit" value="Soumettre" class="btn btn-primary"> <input type="reset" value="Réinitialiser la page aux valeurs par défaut" class="btn btn-link btn-sm show p-0 mrgn-tp-md">
		</form>
	</div>

	<noscript>
		<p>Ce formulaire ne peut pas être soumis sans Javascript. Veuillez utiliser une des méthodes précisées ci-dessous&#160;:</p>
		<ul>
			<li>Méthode 1</li>
			<li>Méthode 2</li>
			<li>Méthode n</li>
		</ul>
	</noscript>
</section>

<section>
	<h2>Cas d'essai particulier</h2>
	<p>Les exemples suivants sont uniquement à des fins de mise à l'essai de certaines configurations de cas particuliers afin de vérifier que le plugiciel continue de fonctionner comme prévu.</p>
	<h3><code>&lt;div></code> entre le formulaire et le plugin de validation de formulaire</h3>
	<p>Lorsqu'il y a une balise <code>&lt;div></code> enveloppant l'élément <code>&lt;form></code> entre le formulaire et le plugin de validation.</p>
	<div class="row">
		<div class="col-md-6">
			<div class="wb-frmvld">
				<div id="app-root">
					<form action="#" method="get" id="edge-test-1">
						<div class="form-group">
							<label for="edge-test-1-fruit" class="required"><span class="field-name">Choisissez un fruit :</span> <strong class="required">(obligatoire)</strong></label>
							<select class="form-control" id="edge-test-1-fruit" name="fruit" required="required">
								<option label="Choisissez un fruit"></option>
								<option value="Pomme">Pomme</option>
								<option value="Orange">Orange</option>
								<option value="Kiwi">Kiwi</option>
							</select>
						</div>
						<button class="btn btn-default" type="submit">Soumettre</button>
					</form>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<p>Code source</p>
			<pre><code>&lt;div class="wb-frmvld">
	&lt;div id="app-root">
		&lt;form action="#" method="get" id="edge-test-1">
			...
		&lt;/form>
	&lt;/div>
&lt;/div></code></pre>
		</div>
	</div>
</section>
